<!--
@description ：设备列表
-->

<template>
  <div>
    <el-card>
      <NormalForm :enumOpt="enumOpt" :formList="formList" :isShowCard="false" :operateForm="queryForm"
                  pageTitle="设备管理"
                  @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
    </el-card>
    <el-card style="margin-top: 20px;">
      <div>
        <el-table v-loading="loading" :data="tableList" max-height="560" min-height="420" style="width: 100%">
          <el-table-column :show-overflow-tooltip="true" align="center" label="设备ID" min-width="320"
                           prop="deviceInfoId">
            <template slot-scope="{ row }">
              <div style="display: flex;align-items: center;justify-content: center">
                <svg-icon icon-class="equipment_id" style="width:20px; height:20px;margin-right:6px"></svg-icon>
                <span style="line-height: 30px">{{ row.deviceInfoId }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="false" align="center" label="设备名称" min-width="140"
                           prop="deviceName">
          </el-table-column>
          <el-table-column :show-overflow-tooltip="false" align="center" label="设备别名" min-width="140"
                           prop="deviceByName">
            <template slot="header">
              <div>设备别名
                <el-tooltip
                  content="用于区分设备的标记名称"
                  effect="dark" placement="top">
                  <i class="el-icon-info" style="margin-left: 4px;color: #CCCCCC"></i></el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="false" align="center" label="绑定员工" min-width="160"
                           prop="">
            <template slot-scope="{ row }">
              <div style="display: flex;align-items: center;justify-content: center">
                <img v-if="row.headImageUrl" :src="row.headImageUrl" alt=""
                     style="width:30px; height:30px;border-radius:50%;margin-right:6px">
                <span style="line-height: 30px">{{ row.userName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="false" align="center" label="CPU" min-width="100"
                           prop="useCPURate">
          </el-table-column>
          <el-table-column :show-overflow-tooltip="false" align="center" label="运行状态" min-width="100"
                           prop="runStatus">
            <template slot-scope="{ row }">
              <div :class="row.runStatus == '1' ? 'tab_online' : 'tabNoOnline'">
                {{ row.runStatus == '1' ? '在线' : '离线' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="false" align="center" label="设备类型" min-width="140"
                           prop="deviceType">
          </el-table-column>
          <el-table-column :show-overflow-tooltip="false" align="center" label="内存" min-width="120"
                           prop="useMemRate"></el-table-column>
          <el-table-column :show-overflow-tooltip="false" align="center" label="外网IP" min-width="160"
                           prop="ipAddress"></el-table-column>
          <el-table-column :show-overflow-tooltip="false" align="center" label="最后活跃时间" min-width="160"
                           prop="leaveTime"></el-table-column>
          <el-table-column :show-overflow-tooltip="false" align="center" label="状态" min-width="160"
                           prop="deviceStatus">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.deviceStatus" active-value="1" inactive-value="0"
                         @change="deviceStatusChange(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column align="center" class-name="small-padding fixed-width" fixed="right" label="操作"
                           width="140">
            <template slot-scope="{ row }">
              <div style="display: flex; justify-content: space-around">
                <el-button size="mini" type="text" @click="deleteItem(row)">删除
                </el-button>
                <!--                <el-button size="mini" type="text">分配-->
                <!--                </el-button>-->
                <el-button size="mini" type="text" @click="toEdit(row)">修改别名
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
                          @handleCurrentChange="getListFn"
                          @handleSizeChange="getListFn"></NormalPagination>
      </div>
    </el-card>

<!--    修改设备别名-->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="dialogVisible"
               title="修改设备别名" width="440px">
      <el-form ref="otherForm" :model="otherForm" :rules="otherFormRules" label-width="120px">
        <el-form-item label="设备别名" prop="deviceByName">
          <el-input v-model="otherForm.deviceByName" maxlength="10" placeholder="请输入" show-word-limit style="width: 220px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button plain type="info" @click="dialogVisible = false">取 消
        </el-button>
        <el-button type="primary" @click="otherSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除分组 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="delVisible"
               title="删除确认" width="400px">
      <span>确认删除该条数据吗？</span>
      <div slot="footer">
        <el-button plain type="info" @click="delVisible = false">取 消
        </el-button>
        <el-button type="primary" @click="delSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import {deleteDevice, queryDeviceInfoList, updateDeviceByName, updateDeviceStatus} from '@/api/equipment/index'

export default {
  name: "equipment", //设备列表
  props: {},
  components: {},
  data() {
    return {
      otherForm: {
        deviceId: '',
        deviceName: '',
      },
      queryForm: {
        deviceName: '',
        runStatus: '',
        deviceByName: '',
        pageNum: 1,
        pageSize: 10,
      }, // 查询问卷
      formList: [
        {
          label: '设备',
          value: [],
          prop: 'deviceName',
          type: 'INPUT',
        },
        {
          label: '在线状态',
          value: '',
          prop: 'runStatus',
          type: 'SELECT',
          emunName: 'statesList'
        },
        {
          label: '设备别名',
          value: '',
          prop: 'deviceByName',
          type: 'INPUT',
          emunName: ''
        },
      ], // 查询框
      enumOpt: {
        statesList: [
          {dictLabel: '在线', dictValue: '1'},
          {dictLabel: '离线', dictValue: '0'},
        ],
      },
      tableList: [], // 表格数据
      total: 0, //表格数据总数
      loading: false,
      dialogVisible: false, // 新增/编辑分组
      delVisible: false, // 分组删除确认
      otherFormRules: {
        deviceByName: [{
          required: true, message: '设备别名不能为空', trigger: 'blur'
        }, {maxLength: 10, message: '设备名称在10字内，请核对后再输入', trigger: 'blur'}]
      },
      currentRow: null,
    }
  },
  watch: {},
  methods: {
    // 修改别名
    otherSubmit() {
      this.$refs.otherForm.validate(async (valid) => {
        if (valid) {
          const params = {
            deviceId: this.currentRow.deviceId || null,
            deviceByName: this.otherForm.deviceByName
          }
          updateDeviceByName(params).then(res => {
            this.dialogVisible = false
            this.$message.success('编辑成功')
            this.getListFn()
          })
        } else {
          return false
        }
      })
    },
    toEdit(row) {
      this.currentRow = row
      this.dialogVisible = true
      this.otherForm = {
        deviceId: '',
        deviceByName: '',
      }
      this.$refs.otherForm.resetFields()
    },
    // 删除雷达
    delSubmit() {
      deleteDevice(this.currentRow.deviceId).then(res => {
        if (res.code == 200) {
          this.$message.success('删除成功')
          this.delVisible = false
          this.getListFn()
        }
      })
    },
    // 雷达状态改变
    deviceStatusChange(row) {
      console.log(row, 'row')
      let params = {
        deviceId: row.deviceId,
        deviceStatus: row.deviceStatus
      }
      console.log(params.deviceStatus, row.deviceStatus, '13')
      updateDeviceStatus(params).then(res => {
        if (res.code == 200) {
          this.$message.success('状态修改成功')
          this.getListFn()
        }
      })
    },
    // 筛选
    handleQuery() {
      this.queryForm.pageNum = 1
      this.getListFn()
    },
    // 查询
    getListFn() {
      let params = {
        ...this.queryForm
      }
      this.loading = true
      queryDeviceInfoList(params).then(res => {
        this.tableList = res.rows || []
        this.total = res.total || 0
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 重置
    handleReset() {
      this.queryForm = {
        deviceName: '',
        runStatus: '',
        deviceByName: '',
        pageNum: 1,
        pageSize: 10,
      }
      this.getListFn()
    },
    // 删除
    deleteItem(row) {
      this.delVisible = true
      this.currentRow = {...row}
    },
  },
  mounted() {
    this.handleQuery()
  },
  created() {
  },
}

</script>

<style lang="scss" scoped>

::v-deep.app-container {
  height: 100%;
  padding: 0;
}

.row-radar {
  background: #fff;
  height: 100%;
  border-radius: 8px;

  ::v-deep {
    .el-tabs__header {
      margin: 0;
    }

    .el-tree {
      padding: 10px 10px 0 10px;
    }

    .el-tree-node__content {
      height: 35px;
      padding-left: 10px !important;
    }
  }
}

.custom-tree-node {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
  font-size: 12px;

  .label-info {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

::v-deep.el-tag.el-tag--success {
  background-color: #e6f9ef !important;
  border-color: #cdf3df !important;
  color: #06c160 !important;
}

::v-deep.el-dropdown-menu__item.is-disabled {
  color: #bbb !important;
}

.delToRe_info {
  padding: 8px 10px;
  color: #082aff;
  margin-bottom: 10px;
  background-color: #EBEEFF;
  border-radius: 8px;
}

.tab_online {
  position: relative;
  height: 20px;

  &::before {
    content: "";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #00ff00;
    top: 8px;
    left: 20px;
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 6;
  }
}

.tabNoOnline {
  position: relative;
  height: 20px;

  &::before {
    content: "";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #ccc;
    top: 8px;
    left: 20px;
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 6;
  }
}
</style>
